﻿@page "/docs/helpers/sizes"

<Seo Canonical="/docs/helpers/sizes" Title="Blazorise Sizes" Description="Learn to use and work with the Blazorise size utilities to easily make an element as wide or as tall with our width and height utilities." />

<DocsPageTitle>
    Sizes
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Size">
        <Paragraph>Defines an element size.</Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code> Don’t resize an element.</UnorderedListItem>
            <UnorderedListItem><Code>ExtraSmall</Code> Makes an element extra small size.</UnorderedListItem>
            <UnorderedListItem><Code>Small</Code> Makes an element small size.</UnorderedListItem>
            <UnorderedListItem><Code>Medium</Code> Makes an element medium size.</UnorderedListItem>
            <UnorderedListItem><Code>Large</Code> Makes an element large.</UnorderedListItem>
            <UnorderedListItem><Code>ExtraLarge</Code> Makes an element extra large.</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <Alert Color="Color.Info" Visible>
        <AlertDescription>Keep in mind: All elements have a size <Code>None</Code> specified by default.</AlertDescription>
    </Alert>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ButtonSize">
        <Paragraph>Defines a button size.</Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code> No sizing will be applied to the button.</UnorderedListItem>
            <UnorderedListItem><Code>Small</Code> Makes a button to appear smaller.</UnorderedListItem>
            <UnorderedListItem><Code>Large</Code> Makes a button to appear larger.</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <Alert Color="Color.Info" Visible>
        <AlertDescription>Keep in mind: All elements have a size <Code>None</Code> specified by default.</AlertDescription>
    </Alert>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ModalSize">
        <Paragraph>Changes the size of the modal.</Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>Default</Code> Default modal size for current provider.</UnorderedListItem>
            <UnorderedListItem><Code>Small</Code> Small modal.</UnorderedListItem>
            <UnorderedListItem><Code>Large</Code> Large modal.</UnorderedListItem>
            <UnorderedListItem><Code>ExtraLarge</Code> Extra large modal.</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="FigureSize">
        <Paragraph>Defines the size of the figure component.</Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>None</Code> No sizing applied.</UnorderedListItem>
            <UnorderedListItem><Code>Is16x16</Code> 16x16 px</UnorderedListItem>
            <UnorderedListItem><Code>Is24x24</Code> 24x24 px</UnorderedListItem>
            <UnorderedListItem><Code>Is32x32</Code> 32x32 px</UnorderedListItem>
            <UnorderedListItem><Code>Is48x48</Code> 48x48 px</UnorderedListItem>
            <UnorderedListItem><Code>Is64x64</Code> 64x64 px</UnorderedListItem>
            <UnorderedListItem><Code>Is96x96</Code> 96x96 px</UnorderedListItem>
            <UnorderedListItem><Code>Is128x128</Code> 128x128 px</UnorderedListItem>
            <UnorderedListItem><Code>Is256x256</Code> 256x256 px</UnorderedListItem>
            <UnorderedListItem><Code>Is512x512</Code> 512x512 px</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>